<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title></title>
</head>
<body>
	<div id="div1">
		<input id="username" type="text" name="" placeholder="用户名" onblur="fun()">
		<br/>
		<span id="userspan">用户名是6-18个字符，可使用字母、数字、下划线、需以字母开头</span>
		<br/>
		<input id="password" type="password" name="" placeholder="输入密码">
	</div>

</body>
</html>

<style type="text/css">
	#div1{
		width: 400px;height: 200px;background-color: lightblue;border: 1px solid #000;text-align: center;display: flex;flex-direction: column;justify-content: center;align-items: center;
	}

	#div1 input{
		width: 180px;height: 30px;margin-top:20px 
	}
	#div1 span{
		font-size: 10px;color: red;margin-top:10px;
	}
</style>

<script type="text/javascript">
	function fun() {
		var username = document.getElementById("username");
		var userspan = document.getElementById("userspan");

		var ovalue = username.value
		if(ovalue.length<6 || ovalue.length>18){
			userspan.innerHTML ="!长度应该是6-18个字符"
		}else if(!(ovalue[0]>="a" && ovalue[0]<="z" || ovalue[0]>="A" && ovalue[0]<="Z")){
			userspan.innerHTML = "!首字符不是字母"

		}else if(!isedl(ovalue)){
			userspan.innerHTML = "请使用字母、数字、下划线进行命名"
		}

		}else{
			userspan.innerHTML = "符合用户名的要求"

	}


	function ised1(char) {
		var flag = true
		for (var i = 0; i < char.length; i++) {
			if(!(char[i]>="A" && char[i]<="Z"||char[i]>="a" && char[i]<="z" ||char[i]>="0" && char[i]<=9 ||
			    char[i]++"_")){
				flag=false;
			    break;
			}
		}

		return flag


	}

	
	

</script>